<script setup>
import {ref,reactive} from 'vue'
//图片地址数组
const imgs=[
  "src/assets/imgs/1.jpeg",
  "src/assets/imgs/2.jpeg",
  "src/assets/imgs/3.jpeg",
]

//当前显示的图片索引
const index=ref(0)



//上一张
const prevclick=()=>{
//此处写代码
index.value--
  if(index.value<0){
    index.value=imgs.length-1
  }



}
//下一张
const nextclick=()=>{
  //此处写代码

index.value++
  if(index.value>imgs.length-1) {
    index.value=0
  }



}

//每隔3秒切换下一张
setInterval(()=>{
  //此处写代码
  nextclick()


},3000)

//点击小圆点
const dotclick=(i)=>{
  //此处写代码

  index.value=i

}




</script>

<template>
  <div class="carousel">
    <!--   使用v-for 修改下面的代码 , 显示图片-->
    <img v-for="(imgurl,key) in imgs" :src="imgurl" :key="key" :class="{'active':key===index}"  alt="">

    <span class="prev" @click="prevclick">&lt;</span>
    <span class="next" @click="nextclick">&gt;</span>

    <div class="dots">
<!--   使用v-for 修改下面的代码 , 点击小圆点时，相应的图显示-->
      <span v-for="(imgurl,key) in imgs"  class="dot"  :key="key" :class="{active:key===index}" @click="dotclick(key)"></span>



    </div>
  </div>
  <div>
    <router-link to="/">home</router-link> |
    <router-link to="/watch">侦听器</router-link> |
    <router-link to="/about">about</router-link>
  </div>
  <hr>
  <div>
    <router-view/>
  </div>

</template>


<style>
.carousel {
  width: 1000px;
  height: 240px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
.carousel img {
  width: 1000px;
  height: 240px;
  display: none;
}
.carousel .active{
  display: block;
}
.carousel .prev, .carousel .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  cursor: pointer;
}
.carousel .prev {
  left: 0;
}
.carousel .next {
  right: 0;
}
.dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.dot {
  width: 10px;
  height: 10px;
  background-color: rgba(255,255,255,0.5);
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}
/* 当前小圆点的样式 */
.dot.active {
  background-color: #fff;
}
</style>
